<template>
  <div class="news-home">
    <!-- 头条新闻轮播 -->
    <div class="hero-section">
      <el-carousel height="400px" indicator-position="outside">
        <el-carousel-item v-for="news in heroNews" :key="news.id">
          <div class="hero-item" @click="viewNews(news)">
            <div class="hero-image">
              <img :src="news.image" :alt="news.title" />
              <div class="hero-overlay"></div>
            </div>
            <div class="hero-content">
              <div class="hero-category">
                <el-tag :type="getCategoryColor(news.category)">
                  {{ news.category }}
                </el-tag>
              </div>
              <h2 class="hero-title">{{ news.title }}</h2>
              <p class="hero-summary">{{ news.summary }}</p>
              <div class="hero-meta">
                <span class="publish-time">{{ formatDate(news.publishedAt) }}</span>
                <span class="read-count">{{ news.readCount }}次阅读</span>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 新闻分类导航 -->
    <div class="category-nav">
      <div class="nav-container">
        <div class="nav-title">
          <h3>资讯分类</h3>
        </div>
        <div class="nav-items">
          <div 
            v-for="category in categories" 
            :key="category.id"
            class="nav-item"
            :class="{ active: activeCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            <div class="nav-icon">
              <el-icon>
                <component :is="category.icon" />
              </el-icon>
            </div>
            <div class="nav-content">
              <div class="nav-name">{{ category.name }}</div>
              <div class="nav-count">{{ category.count }}篇</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新资讯 -->
    <div class="latest-news">
      <div class="section-header">
        <h3>最新资讯</h3>
        <el-button text @click="viewAllNews">
          查看全部 <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      
      <div class="news-grid">
        <div 
          v-for="news in latestNews" 
          :key="news.id"
          class="news-card"
          @click="viewNews(news)"
        >
          <div class="news-image">
            <img :src="news.image" :alt="news.title" />
            <div class="news-category">
              <el-tag :type="getCategoryColor(news.category)" size="small">
                {{ news.category }}
              </el-tag>
            </div>
          </div>
          
          <div class="news-content">
            <h4 class="news-title">{{ news.title }}</h4>
            <p class="news-summary">{{ news.summary }}</p>
            
            <div class="news-meta">
              <div class="meta-left">
                <span class="author">{{ news.author }}</span>
                <span class="publish-time">{{ formatDate(news.publishedAt) }}</span>
              </div>
              <div class="meta-right">
                <span class="read-count">
                  <el-icon><View /></el-icon>
                  {{ news.readCount }}
                </span>
                <span class="like-count">
                  <el-icon><Star /></el-icon>
                  {{ news.likeCount }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门话题 -->
    <div class="trending-topics">
      <div class="section-header">
        <h3>热门话题</h3>
        <el-button text @click="viewAllTopics">
          查看全部 <el-icon><ArrowRight /></el-icon>
        </el-button>
      </div>
      
      <div class="topics-container">
        <div class="topics-list">
          <div 
            v-for="(topic, index) in trendingTopics" 
            :key="topic.id"
            class="topic-item"
            @click="viewTopic(topic)"
          >
            <div class="topic-rank">{{ index + 1 }}</div>
            <div class="topic-content">
              <div class="topic-title">{{ topic.title }}</div>
              <div class="topic-stats">
                <span class="discussion-count">{{ topic.discussionCount }}讨论</span>
                <span class="heat-value">热度 {{ topic.heatValue }}</span>
              </div>
            </div>
            <div class="topic-trend">
              <el-icon v-if="topic.trend === 'up'" class="trend-up">
                <TrendCharts />
              </el-icon>
              <el-icon v-else-if="topic.trend === 'down'" class="trend-down">
                <TrendCharts />
              </el-icon>
              <span v-else class="trend-stable">-</span>
            </div>
          </div>
        </div>
        
        <div class="topics-cloud">
          <div class="cloud-title">话题云</div>
          <div class="cloud-tags">
            <el-tag
              v-for="tag in topicTags"
              :key="tag.name"
              :size="getTagSize(tag.weight)"
              :type="getTagType(tag.weight)"
              @click="searchByTag(tag.name)"
              class="cloud-tag"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐阅读 -->
    <div class="recommended-reading">
      <div class="section-header">
        <h3>推荐阅读</h3>
      </div>
      
      <div class="reading-list">
        <div 
          v-for="article in recommendedArticles" 
          :key="article.id"
          class="reading-item"
          @click="viewNews(article)"
        >
          <div class="reading-image">
            <img :src="article.image" :alt="article.title" />
          </div>
          
          <div class="reading-content">
            <div class="reading-category">
              <el-tag :type="getCategoryColor(article.category)" size="small">
                {{ article.category }}
              </el-tag>
            </div>
            <h4 class="reading-title">{{ article.title }}</h4>
            <p class="reading-summary">{{ article.summary }}</p>
            
            <div class="reading-meta">
              <span class="reading-author">{{ article.author }}</span>
              <span class="reading-time">{{ formatDate(article.publishedAt) }}</span>
              <span class="reading-duration">{{ article.readingTime }}分钟阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  ArrowRight, View, Star, TrendCharts, Monitor, Code, 
  Document, Trophy, Setting, User
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const activeCategory = ref('all')

// 头条新闻
const heroNews = ref([
  {
    id: 1,
    title: 'Vue 3.4 正式发布：性能提升与新特性详解',
    summary: 'Vue.js 团队发布了 3.4 版本，带来了显著的性能提升和多项新特性，包括更好的 TypeScript 支持和组合式 API 优化。',
    category: '技术动态',
    image: '/images/news/vue-3-4.jpg',
    publishedAt: new Date('2024-01-15'),
    readCount: 15420
  },
  {
    id: 2,
    title: '2024年前端开发趋势预测：AI驱动的开发体验',
    summary: '随着人工智能技术的快速发展，前端开发正在经历一场革命。本文深入分析了AI如何改变我们的开发方式。',
    category: '行业资讯',
    image: '/images/news/ai-frontend.jpg',
    publishedAt: new Date('2024-01-14'),
    readCount: 12350
  },
  {
    id: 3,
    title: 'React 18 并发特性实战指南',
    summary: 'React 18 引入的并发特性为应用性能带来了革命性的提升。本文将通过实际案例展示如何正确使用这些特性。',
    category: '学习资源',
    image: '/images/news/react-18.jpg',
    publishedAt: new Date('2024-01-13'),
    readCount: 9876
  }
])

// 分类导航
const categories = ref([
  { id: 'all', name: '全部', icon: 'Monitor', count: 1250 },
  { id: 'tech', name: '技术动态', icon: 'Code', count: 456 },
  { id: 'industry', name: '行业资讯', icon: 'TrendCharts', count: 324 },
  { id: 'learning', name: '学习资源', icon: 'Document', count: 287 },
  { id: 'career', name: '职场发展', icon: 'User', count: 183 }
])

// 最新资讯
const latestNews = ref([
  {
    id: 4,
    title: 'TypeScript 5.3 发布：装饰器稳定版来了',
    summary: 'TypeScript 5.3 正式发布，装饰器功能终于稳定，同时还带来了多项性能优化和新特性。',
    category: '技术动态',
    author: '张三',
    image: '/images/news/typescript-5-3.jpg',
    publishedAt: new Date('2024-01-12'),
    readCount: 8765,
    likeCount: 234
  },
  {
    id: 5,
    title: '微前端架构实践：从单体到微服务的演进',
    summary: '本文详细介绍了微前端架构的设计理念、实现方案以及在大型项目中的实践经验。',
    category: '学习资源',
    author: '李四',
    image: '/images/news/micro-frontend.jpg',
    publishedAt: new Date('2024-01-11'),
    readCount: 7654,
    likeCount: 189
  },
  {
    id: 6,
    title: 'Web3 开发入门：构建你的第一个 DApp',
    summary: '随着区块链技术的发展，Web3 开发成为热门话题。本文将带你从零开始构建第一个去中心化应用。',
    category: '技术动态',
    author: '王五',
    image: '/images/news/web3-dapp.jpg',
    publishedAt: new Date('2024-01-10'),
    readCount: 6543,
    likeCount: 156
  },
  {
    id: 7,
    title: '前端性能优化实战：从 60fps 到丝滑体验',
    summary: '性能优化是前端开发的永恒话题。本文分享了多种实用的性能优化技巧和最佳实践。',
    category: '学习资源',
    author: '赵六',
    image: '/images/news/performance-optimization.jpg',
    publishedAt: new Date('2024-01-09'),
    readCount: 5432,
    likeCount: 123
  }
])

// 热门话题
const trendingTopics = ref([
  { id: 1, title: 'Vue 3 vs React 18 性能对比', discussionCount: 1234, heatValue: 9876, trend: 'up' },
  { id: 2, title: 'AI 辅助编程工具推荐', discussionCount: 987, heatValue: 8765, trend: 'up' },
  { id: 3, title: '前端框架选择指南 2024', discussionCount: 765, heatValue: 7654, trend: 'stable' },
  { id: 4, title: 'TypeScript vs JavaScript', discussionCount: 654, heatValue: 6543, trend: 'down' },
  { id: 5, title: '微前端架构最佳实践', discussionCount: 543, heatValue: 5432, trend: 'up' }
])

// 话题标签云
const topicTags = ref([
  { name: 'Vue.js', weight: 10 },
  { name: 'React', weight: 9 },
  { name: 'TypeScript', weight: 8 },
  { name: 'JavaScript', weight: 7 },
  { name: 'Node.js', weight: 6 },
  { name: 'Webpack', weight: 5 },
  { name: 'Vite', weight: 4 },
  { name: 'CSS', weight: 3 },
  { name: 'HTML', weight: 2 },
  { name: 'Git', weight: 1 }
])

// 推荐阅读
const recommendedArticles = ref([
  {
    id: 8,
    title: '深入理解 JavaScript 事件循环机制',
    summary: '事件循环是 JavaScript 异步编程的核心概念，本文将深入解析其工作原理。',
    category: '学习资源',
    author: '技术专家',
    image: '/images/news/event-loop.jpg',
    publishedAt: new Date('2024-01-08'),
    readingTime: 15
  },
  {
    id: 9,
    title: 'CSS Grid 布局完全指南',
    summary: 'CSS Grid 是现代网页布局的强大工具，本文提供了完整的学习指南和实践案例。',
    category: '学习资源',
    author: '前端大师',
    image: '/images/news/css-grid.jpg',
    publishedAt: new Date('2024-01-07'),
    readingTime: 20
  }
])

// 方法
const getCategoryColor = (category) => {
  const colors = {
    '技术动态': 'primary',
    '行业资讯': 'success',
    '学习资源': 'warning',
    '职场发展': 'info',
    '开源项目': 'danger'
  }
  return colors[category] || 'default'
}

const getTagSize = (weight) => {
  if (weight >= 8) return 'large'
  if (weight >= 5) return 'default'
  return 'small'
}

const getTagType = (weight) => {
  if (weight >= 8) return 'primary'
  if (weight >= 5) return 'success'
  return 'info'
}

const formatDate = (date) => {
  const now = new Date()
  const diff = now - date
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString('zh-CN')
  }
}

const selectCategory = (categoryId) => {
  activeCategory.value = categoryId
  // 根据分类筛选新闻
}

const viewNews = (news) => {
  router.push(`/news/detail/${news.id}`)
}

const viewAllNews = () => {
  router.push('/news/list')
}

const viewTopic = (topic) => {
  router.push(`/news/topic/${topic.id}`)
}

const viewAllTopics = () => {
  router.push('/news/topics')
}

const searchByTag = (tag) => {
  router.push({
    path: '/news/search',
    query: { q: tag }
  })
}

onMounted(() => {
  // 初始化数据
})
</script>

<style lang="scss" scoped>
.news-home {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.hero-section {
  margin-bottom: 40px;
  
  .hero-item {
    position: relative;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 12px;
    
    .hero-image {
      position: relative;
      width: 100%;
      height: 100%;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1) 0%,
          rgba(0, 0, 0, 0.7) 100%
        );
      }
    }
    
    .hero-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 40px;
      color: white;
      
      .hero-category {
        margin-bottom: 12px;
      }
      
      .hero-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 12px;
        line-height: 1.3;
      }
      
      .hero-summary {
        font-size: 16px;
        margin-bottom: 16px;
        opacity: 0.9;
        line-height: 1.5;
      }
      
      .hero-meta {
        display: flex;
        gap: 20px;
        font-size: 14px;
        opacity: 0.8;
      }
    }
  }
}

.category-nav {
  margin-bottom: 40px;
}

.nav-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.nav-title {
  margin-bottom: 20px;
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.nav-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--el-border-color-lighter);
  
  &:hover,
  &.active {
    border-color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
  }
  
  .nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  
  .nav-content {
    .nav-name {
      font-weight: 500;
      margin-bottom: 2px;
      color: var(--el-text-color-primary);
    }
    
    .nav-count {
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }
}

.latest-news,
.trending-topics,
.recommended-reading {
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.news-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
  
  .news-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .news-category {
      position: absolute;
      top: 12px;
      left: 12px;
    }
  }
  
  .news-content {
    padding: 20px;
    
    .news-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--el-text-color-primary);
      line-height: 1.4;
    }
    
    .news-summary {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-bottom: 16px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .news-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      
      .meta-left {
        display: flex;
        gap: 8px;
      }
      
      .meta-right {
        display: flex;
        gap: 12px;
        
        span {
          display: flex;
          align-items: center;
          gap: 2px;
        }
      }
    }
  }
}

.topics-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.topics-list {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.topic-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  cursor: pointer;
  transition: background-color 0.3s ease;
  
  &:hover {
    background: var(--el-fill-color-extra-light);
  }
  
  &:last-child {
    border-bottom: none;
  }
  
  .topic-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--el-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
  }
  
  .topic-content {
    flex: 1;
    
    .topic-title {
      font-weight: 500;
      margin-bottom: 4px;
      color: var(--el-text-color-primary);
    }
    
    .topic-stats {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
  
  .topic-trend {
    .trend-up {
      color: var(--el-color-success);
    }
    
    .trend-down {
      color: var(--el-color-danger);
    }
    
    .trend-stable {
      color: var(--el-text-color-placeholder);
    }
  }
}

.topics-cloud {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  
  .cloud-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }
  
  .cloud-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    .cloud-tag {
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
}

.reading-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reading-item {
  display: flex;
  gap: 20px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
  
  .reading-image {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .reading-content {
    flex: 1;
    
    .reading-category {
      margin-bottom: 8px;
    }
    
    .reading-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--el-text-color-primary);
      line-height: 1.4;
    }
    
    .reading-summary {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-bottom: 12px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .reading-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--el-text-color-placeholder);
    }
  }
}

@media (max-width: 768px) {
  .nav-items {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .reading-item {
    flex-direction: column;
    
    .reading-image {
      width: 100%;
      height: 150px;
    }
  }
}
</style>
